<%--
  Created by IntelliJ IDEA.
  User: 飘然
  Date: 2022/4/16
  Time: 17:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="icon" type="images/x-icon" href="/static/image/b.png"/>
    <title>Buff</title>
</head>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    ul li {
        list-style: none;
    }
    a {
        text-decoration: none;
    }

    .bigBox {
        width: 100vw;
        height: 100vh;
        margin: 0 auto;
    }

    .top {
        box-sizing: border-box;
        width: 80vw;
        height: 10vh;
        color: white;
        background-color: #374866;
        padding: 10px;
    }

    .left {
        float: left;
        width: 20vw;
        height: 100vh;
        background-image: linear-gradient(#3c4e6e 6%, #1e283e 18%);
        text-align: center;
    }

    .left img {
        margin: 5px 0 0 20px;
        width: 200px;
        height: 130px;
    }

    .left li:first-child{
        margin-top: 10px;
    }
    .left li {
        text-align: center;
        line-height: 70px;
        font-size: 20px;
        width: auto;
        height: 70px;
    }

    .left li a {
        display: block;
        width: 300px;
        height: 70px;
        color: white;
    }

    .left a:hover {
        background: linear-gradient(to right, rgba(27, 32, 41, 1.0) 10%, rgba(62, 96, 153, 1.0) 50%, rgba(27, 32, 41, 1.0) 100%);
    }


    .right {
        float: left;
        width: 70vw;
        height: 85vh;
    }

    iframe {
        width: 100%;
        height: 100%;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .bottom {
        box-sizing: border-box;
        width: 80vw;
        height: 90vh;
        background-color: #d6d6d6;
        padding: 30px 20px;
    }

    .active {
        background: linear-gradient(to right, rgba(27, 32, 41, 1.0) 10%, rgba(62, 96, 153, 1.0) 50%, rgba(27, 32, 41, 1.0) 100%);
    }
</style>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(document).ready(function () {
            $(".left li a").click(function () {
                $(".left li a").removeClass("active");
                $(this).addClass("active");
            });
        });
    });
</script>
<body>
<div class="bigBox">
    <div class="context">
        <!-- 左侧功能导航条 -->
        <div class="left">
            <img src="/static/image/buff.png">
            <ul>
                <li><a href="${pageContext.request.contextPath }/type/list" target="myiframe">类型添加</a></li>
                <li><a href="${pageContext.request.contextPath }/goods/gotoBoxManage" target="myiframe">武器箱管理</a></li>
            </ul>
        </div>

        <div class="right">
            <!-- 管理员信息 -->
            <div class="top">
                <h2 style="margin: 20px 40px;">管理员：</h2>
            </div>
            <!-- 功能操作页面 -->
            <div class="bottom">
                <iframe src="${pageContext.request.contextPath }/type/list" name="myiframe" frameborder="0" width="100%" ></iframe>
            </div>
        </div>
    </div>
</div>
</body>
</html>
